<template>
  <div>
    <h3>Welcome</h3>
    <el-button type="primary"
               @click="dialogVisible1=true">对话框1</el-button>
    <el-button type="danger"
               @click="dialogVisible2=true">对话框2</el-button>
    <el-button type="warning"
               @click="dialogVisible3=true">对话框3</el-button>
    <el-dialog title="提示"
               :visible.sync="dialogVisible1"
               width="30%">
      <span>这是一段信息1</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示"
               :visible.sync="dialogVisible2"
               width="30%">
      <span>这是一段信息2</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示"
               :visible.sync="dialogVisible3"
               width="30%">
      <span>这是一段信息3</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible3 = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false
    }
  }
}
</script>
